<template>
  <div class="popup flex-center flex-align-items-center">
    <div class="main">
      <div class="main-header">
        <p>添加商品</p>
        <i class="iconfont icon-guanbi" @click="close"></i>
      </div>
      <div class="content">
        <p class="label font-14">请输入shopify独立站商品详情页链接：</p>
        <el-input type="textarea"></el-input>
        <p class="label font-14">1.请先确认已授权独立站店铺。<span class="font-14 pointer">去授权</span></p>
        <p class="label font-14">2.商品需为上架状态。</p>
        <div class="btns flex">
          <p class="btn font-14">添加商品</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, ref } from 'vue';

const emit = defineEmits(['close']);

const form = ref({});

const close = () => {
  emit('close');
}
</script>

<style lang="less" scoped>
.popup {
  .main {
    position: relative;
    z-index: 10;
    width: 434px;
    background: #fff;
    border-radius: 2px;

    .content {
      padding: 16px 24px;

      &::v-deep {
        .el-textarea {
          width: 100%;
          height: 75px;
          margin-bottom: 16px;

          textarea {
            width: 100%;
            height: 75px;
          }
        }
      }

      .label {
        color: #606266;
        margin-bottom: 8px;

        span {
          color: @main-color;
        }
      }

      .btns {
        padding-top: 16px;
        justify-content: end;

        .btn {
          width: 80px;
          height: 32px;
          background: @main-color;
          border-radius: 2px;
          color: #fff;
          text-align: center;
          line-height: 32px;
        }
      }
    }
  }
}
</style>
